<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/* 清除内外边距 */
			body,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			hr,
			p,
			blockquote,
			/* structural elements 结构元素 */
			dl,
			dt,
			dd,
			ul,
			ol,
			li,
			/* list elements 列表元素 */
			pre,
			/* text formatting elements 文本格式元素 */
			fieldset,
			lengend,
			button,
			input,
			textarea,
			/* form elements 表单元素 */
			th,
			td {
				/* table elements 表格元素 */
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			/* 设置默认字体 */
			body,
			button,
			input,
			select,
			textarea {
				/* for ie */
				/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
				font-family: "微软雅黑", sans-serif, inherit;
				/* 用 ascii 字符表示，使得在任何编码下都无问题 */
				font-size: 0.12rem;
			}
			
			h1 {
				font-size: 18px;
				/* 18px / 12px = 1.5 */
			}
			
			h2 {
				font-size: 16px;
			}
			
			h3 {
				font-size: 14px;
			}
			
			h4,
			h5,
			h6 {
				font-size: 100%;
			}
			
			address,
			cite,
			dfn,
			em,
			var {
				font-style: normal;
			}
			
			/* 将斜体扶正 */
			code,
			kbd,
			pre,
			samp,
			tt {
				font-family: "Courier New", Courier, monospace;
			}
			
			/* 统一等宽字体 */
			small {
				font-size: 12px;
			}
			
			/* 小于 12px 的中文很难阅读，让 small 正常化 */
			
			/* 重置列表元素 */
			ul,
			ol {
				list-style: none;
			}
			
			/* 重置文本格式元素 */
			a {
				text-decoration: none;
			}
			
			a:hover {
				text-decoration: underline;
			}
			
			abbr[title],
			acronym[title] {
				/* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
				border-bottom: 1px dotted;
				cursor: help;
			}
			
			q:before,
			q:after {
				content: '';
			}
			
			/* 重置表单元素 */
			legend {
				color: #000;
			}
			
			/* for ie6 */
			fieldset,
			img {
				border: none;
			}
			
			/* img 搭车：让链接里的 img 无边框 */
			/* 注：optgroup 无法扶正 */
			button,
			input,
			select,
			textarea {
				font-size: 100%;
				/* 使得表单元素在 ie 下能继承字体大小 */
			}
			
			/* 重置表格元素 */
			table {
				border-collapse: collapse;
				border-spacing: 0;
			}
			
			/* 重置 hr */
			hr {
				border: none;
				height: 1px;
			}
			
			/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
			html {
				overflow-y: scroll;
			}
			
			/*超出内容显示省略号*/
			.ellipsis {
				max-width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			
			/*清除浮动*/
			.clearfix {
				*zoom: 1;
			}
			
			.clearfix:before,
			.clearfix:after {
				display: table;
				line-height: 0;
				content: "";
			}
			
			.clearfix:after {
				clear: both;
			}
			

			@charset "utf-8";
			.tc{
				text-align: center;
			}
			.mt5{
				margin-top: 15px;
			}
			
			
			.good_title{
				height: 20px;
				overflow: hidden;
			}
			.googs_list{
				width: 80%;
				margin: 50px auto 0;
				height: 300px;
				/* box-shadow: 0px 0px 5px #999; */
			}
			
			
			.googs_list ul li{
				width: 20%;
				float: left;
				box-sizing: border-box;
				height: 300px;
				border: 1px solid #999;
			}
			.googs_list ul li:hover{
				box-shadow: 0px 0px 3px #000;
			}
			
			.googs_list ul li img{
				width:150px;
				height: 150px;
			}
			
			
			table{
				width: 80%;
				margin:100px auto 150px;
				border-collapse: collapse;
				text-align: center;
			}
			
			tr,th,td{
				border: 1px solid #999;
				padding: 5px;
			}
			tr,th{
				height: 40px;
			}
			table img{
				width: 100px;
				height: 100px;
			}
			.count{
				width: 60px;
				text-align: center;
				vertical-align: bottom;
				height: 26px;
				line-height: 26px;
			}
			.btn{
				width: 40px;
				border: none;
				cursor: pointer;
				outline: none;
				font-size: 20px;
				height: 26px;
				line-height: 26px;
			}
			
		</style>
	</head>
	<body>
						<div class="googs_list tc">
					<div class="tc">
						<br>
						<h2>商品列表展示</h2>
						<br>
					</div>
					<ul class="list_ul">
						<!-- <li>
							<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
							<div class="good_title mt5">
								米家电磁炉
							</div>
							<div class="price mt5">
								249元
							</div>
							<button type="button" class="btn_add mt5">
								加入购物车
							</button>
						</li>
						<li>
							<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
							<div class="good_title mt5">
								米家电磁炉
							</div>
							<div class="price mt5">
								249元
							</div>
							<button type="button" class="btn_add mt5">
								加入购物车
							</button>
						</li>
						<li>
							<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
							<div class="good_title mt5">
								米家电磁炉
							</div>
							<div class="price mt5">
								249元
							</div>
							<button type="button" class="btn_add mt5">
								加入购物车
							</button>
						</li>
						<li>
							<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
							<div class="good_title mt5">
								米家电磁炉
							</div>
							<div class="price mt5">
								249元
							</div>
							<button type="button" class="btn_add mt5">
								加入购物车
							</button>
						</li>
						<li>
							<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
							<div class="good_title mt5">
								米家电磁炉
							</div>
							<div class="price mt5">
								249元
							</div>
							<button type="button" class="btn_add mt5">
								加入购物车
							</button>
						</li> -->
						
					</ul>
				</div>
				
	
	
	
	
	
			<table>
					<thead>
						<tr>
							<th>全选</th>
							<th>商品</th>
							<th>数量</th>
							<th>单价</th>
							<th>小计</th>
							<th>操作</th>
							<th>时间</th>
						</tr>
					</thead>
					<tbody>
						<!-- <tr>
							<td>
								<input type="checkbox" name="" id="" value="" />
							</td>
							<td>
								<p>
									<img src="//i1.mifile.cn/a1/pms_1506417289.23728408.jpg" >
									<br>
									<span>米家压力IH电</span>
								</p>
							</td>
							<td>
								<button type="button" class="btn">-</button>
								<input type="text" name="" id="" value="" class="count"/>
								<button type="button" class="btn">+</button>
							</td>
							<td>
								<span>3000元</span>
							</td>
							<td>
								3000*2
							</td>
							<td>
								<button type="button">删除</button>
							</td>
							<td>
								2020/01/10
							</td>
							
						</tr>
						 -->
					</tbody>
					<tfoot>
						<tr>
							<td>
								<label>
									<input type="checkbox" name="check" class="chooseAll"/>
									全选按钮
								</label>
							</td>
							<td>
								<button type="button" id="delChecked">
									删除选中商品
								</button>
							</td>
							<td colspan="4"></td>
							<td>
								总价：<br>
								<div id="sum">
									
								</div>
							</td>
						</tr>
					</tfoot>
				</table>
				
				<script type="text/javascript">
					;(function(){
					
					var dataObj = {
					 	"data": [{
					 		"productid": "7528",
					 		"commodityid": "1175000272",
					 		"goodsid": "2175000298",
					 		"name": "米家电磁炉",
					 		"price": "249",
					 		"market_price": "299",
					 		"image": "//i1.mifile.cn/a1/pms_1513822496.31335198.jpg",
					 	}, {
					 		"productid": "6825",
					 		"commodityid": "1173700017",
					 		"goodsid": "2173700027",
					 		"name": "小米USB Type C快速充电数据线",
					 		"price": "16.9",
					 		"market_price": "16.9",
					 		"image": "//i1.mifile.cn/a1/pms_1506393991.60537642.jpg",
					 	}, {
					 		"productid": "6271",
					 		"commodityid": "1172800022",
					 		"goodsid": "2172800014",
					 		"name": "小米随身手电筒",
					 		"price": "79",
					 		"market_price": "79",
					 		"image": "//i1.mifile.cn/a1/pms_1506417289.23728408.jpg",
					 	}, {
					 		"productid": "9530",
					 		"commodityid": "1191200019",
					 		"goodsid": "2191200018",
					 		"name": "米家压力IH电饭煲1S",
					 		"price": "899",
					 		"market_price": "1099",
					 		"image": "//i1.mifile.cn/a1/pms_1553764670.0369286.jpg",
					 	}, {
					 		"productid": "9144",
					 		"commodityid": "1185000014",
					 		"goodsid": "1185000014",
					 		"name": "空调（1.5匹/变频/一级能效）",
					 		"price": "1999",
					 		"market_price": "2699",
					 		"image": "//i1.mifile.cn/a1/pms_1545286017.38639954.jpg",
						 	}]
						}
						
						
					localStorage.dataObj = JSON.stringify(dataObj.data);
					
				}())
			
				var arr = [];
				var cartArr = [];
				
				window.onload = function(){
					showGoodsList(getLocalGoodsListData());
					render(getLocalCartData());
				}
				
				function getLocalGoodsListData(){
					arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
					return arr;
				}
				function getLocalCartData(){
					cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr) : [];
					return cartArr;
				}
				
				function showGoodsList(arr){
					var ulList = document.querySelector(".list_ul");
					ulList.innerHTML = "";
					for(var i = 0;i<arr.length;i++){
						ulList.innerHTML += `
							<li data-id="${ arr[i].goodsid }">
								<img src="${ arr[i].image }" >
								<div class="good_title mt5">
									${ arr[i].name }
								</div>
								<div class="price mt5">
									${ arr[i].price }元
								</div>
								<button type="button" class="btn_add mt5" onclick='addCart("${ arr[i].goodsid }","${ arr[i].image }","${ arr[i].name }","${ arr[i].price }")'>
									加入购物车
								</button>
							</li>
						
						`;
						//console.log(arr[i].goodsid);
					}
						
				}
				
				function addCart(goodsId,img,goodsName,price){
					var count = 1;
					var xiaoji = price / 1 *count;
					var obj = {
						id: goodsId,
						src: img,
						title: goodsName,
						price: price,
						count: count,
						xiaoji: xiaoji.toFixed(2),
						time: new Date().toLocaleTimeString()
					}
					addData(obj);
				}
				
				function addData(obj){
					cartArr = getLocalCartData();
					var result = cartArr.some(function(item,index){
						return item.id === obj.id;
					})
					if(result){
						jia(obj.id);
						return;
					}
					cartArr.push(obj);
					localStorage.cartArr = JSON.stringify(cartArr);
					render(cartArr);
				}
				
				function render(cartArr){
					var tbody = document.querySelector('tbody');
					tbody.innerHTML = '';					
					var sum = 0;
					for(var i = 0;i < cartArr.length;i++){
						tbody.innerHTML +=`
							<tr>
								<td>
									<input type="checkbox" name="" id="" value=""  class="chooseOnly" data-id="${ cartArr[i].id }"/>
								</td>
								<td>
									<p>
										<img src="${ cartArr[i].src }" >
										<br>
										<span>${ cartArr[i].title }</span>
									</p>
								</td>
								<td>
									<button type="button" class="btn" onclick="jian(${ cartArr[i].id })">-</button>
									<input disabled type="number" name="" id="" value="${ cartArr[i].count }" class="count"/>
									<button type="button" class="btn" onclick="jia(${ cartArr[i].id })">+</button>
								</td>
								<td>
									<span>${ cartArr[i].price }元</span>
								</td>
								<td>
									${ cartArr[i].xiaoji }
								</td>
								<td>
									<button type="button" onclick="del(${ cartArr[i].id })">删除</button>
								</td>
								<td>
									${ cartArr[i].time }
								</td>
								
							</tr>
						`
						sum = sum / 1 + (cartArr[i].xiaoji / 1)
					}
					document.getElementById("sum").innerHTML = sum;	
				}
				
				function jian(id){
					cartArr = getLocalCartData();
					cartArr.forEach(function (cv,i){
						if(cv.id == id){
							if(cv.count > 1){
								cv.count--;
								cv.xiaoji = (cv.count * cv.price).toFixed(2);
							}else{
								alert('不能再减了')
							}
						}
					})
					localStorage.cartArr = JSON.stringify(cartArr);
					render(cartArr);
				}
				
				function jia(id){
					cartArr = getLocalCartData();
					cartArr.forEach(function(cv,i){
						if(cv.id == id){
							if(cv.count < 5){
								cv.count++;
								cv.xiaoji = (cv.count * cv.price).toFixed(2);
							}else{
								alert('没货了')
							}
						}
					})
					localStorage.cartArr = JSON.stringify(cartArr);
					render(cartArr);
				}
				
				function del(id) {
					cartArr = getLocalCartData();
					cartArr = cartArr.filter(function (item, index) {
						return item.id != id
					})
					localStorage.cartArr = JSON.stringify(cartArr);
					render(getLocalCartData());
				}
				
				
				var chooseAll = document.querySelector(".chooseAll");
				chooseAll.onclick = function () {
					var chooseOnlyList = document.querySelectorAll(".chooseOnly");
					for (let index = 0; index < chooseOnlyList.length; index++) {
						chooseOnlyList[index].checked = chooseAll.checked;
					}
				}
				
				
				var delChecked = document.getElementById("delChecked");
				delChecked.onclick = function(){
					cartArr = getLocalCartData();
					var chooseOnlyList = document.querySelectorAll(".chooseOnly:checked");
					for (let i = 0; i < chooseOnlyList.length; i++) {
						
						cartArr.forEach(function(item,index){
							if(item.id === chooseOnlyList[i].getAttribute("data-id")){
								cartArr.splice(index,1)
							}
						})
					}
					localStorage.cartArr = JSON.stringify(cartArr);
					render(getLocalCartData());
				}
//				console.log(getLocalGoodsListData())
				
				</script>
	</body>
</html>
